<script setup>
import { reactive } from 'vue'

const list = reactive([
  {
    title: '个人资料'
  },
  // {
  //   title: '求职意向'
  // },
  {
    title: '工作经历'
  },
  {
    title: '个人技能'
  },

  {
    title: '项目经历'
  },
  {
    title: '个人评价'
  },
])
</script>

<template>


  <div class="info color-333 font-16">
    <div class="flex-center header">
      前端开发工程师
    </div>
    <div class="info-item" v-for="item in list" :key="item.title">
      <div class="flex-align">
        <div class="title">
          {{ item.title }}
        </div>
        <div class="line flex-1"></div>
      </div>
      <div v-if="item.title === '个人资料'">
        <div class="flex-between grzl">
          <div class="flex-align">
            <div>姓名：</div>
            <div>郭重志</div>
          </div>
          <div class="flex-align">
            <div>学历：</div>
            <div>本科</div>
          </div>
          <div class="flex-align">
            <div>年龄：</div>
            <div>25</div>
          </div>
        </div>

        <div class="flex-between grzl">
          <div class="flex-align">
            <div>工作年限：</div>
            <div>2年半</div>
          </div>
          <div class="flex-align">
            <div>电话：</div>
            <div>15528307694</div>
          </div>
          <div class="flex-align">
            <div>邮箱：</div>
            <div>2624703266@qq.com</div>
          </div>


        </div>
        <div class="flex-between grzl">
          <div class="flex-align">
            <div>毕业院校：</div>
            <div>成都大学</div>
          </div>
          <div class="flex-align">
            <div>就读时间：</div>
            <div>2017.9-2021-7</div>
          </div>

          <div class="flex-align">
            <div>就读专业：</div>
            <div>机械设计制造及其自动化</div>
          </div>

        </div>
      </div>
      <div class="pl-24 pr-24" v-if="item.title === '工作经历'">
        <div style="">2021-11 – 至今: 宁波金唐软件有限公司</div>
        <p>主要工作内容</p>
        <ul>
          <li>1. 小程序(主要项目: 健康宁波):
            小程序主要以支付宝小程序为主,技术栈是uniapp及其相关插件,开发小程序主要以uniapp的分包技术,以及大图片放到服务器上来解决发包时包过大无法发布的问题。有支付宝插件开发经验</li>
          <li>
            <div>
              2. 移动端H5(主要项目: 健康宁波,健康银行,移动护理,鄞领健康等): 移动端H5,主要技术栈是vue2和vue3及其相关生态. 在工作中根据常用场景,搭建了vue3脚手架项目
            </div>
            <ul>
              <li>a) 集成: vant组件库,以及postcss-pxtorem用于移动端适配,swiper, lodash,moment等插件,初始化css文件集成</li>
              <li>b) 通用组件和通用函数等封装: 虚拟列表组件,常用样式类名封装(基于scss预处理器),;通用组件通过插件形式注册成全局组件</li>
            </ul>
          </li>
          <li>
            3. PC端项目，主要是一些后台管理（主要健康宁波后台管理，公司业务一体化，健康银行后台管理，远程门诊,心路领航青少年心理健康等）：pc端主要技术栈是vue2.vue3，ts，angular.
            权限校验，有根据团队规范书写一些后台相关的模板代码
          </li>
        </ul>
      </div>
      <div class="pl-24 pr-24" v-if="item.title === '个人技能'">
        <ul class="grjn">
          <li>1. 熟练es6+,typescript，vue2，vue3，uniapp，对vue2的源码有一定的了解,熟悉常用的vue优化手段</li>
          <li>2. 熟悉 Ui框架： element，uviewui，vant等</li>
          <li>3. 熟悉前端模块化, 熟悉nodejs,有开发脚手架工具经验,熟悉面向对象编程</li>
          <li>4. 了解前端工程化,了解移动端适配原理</li>
          <li>5. 其他：了解 常用数据结构与算法、网络原理，mysql , redis</li>
        </ul>
      </div>

      <div class="pl-24 pr-24" v-if="item.title === '项目经历'">
        <div class="project">
          <div class="project-item">
            <div class="project-header">
              <div>
                2022.08-2023.8
              </div>
              <div class="text-center font-bold font-26">健康宁波支付宝小程序</div>
              <div hidden>
                2022.08-2023.8
              </div>
            </div>

            <div class="project-intro">
              项目简介：作为一个公众健康平台,不仅提供平台集成的宁波若干家医院的预约挂号,报告查询,义诊,排队叫号,发热
              门诊等平台自己开发的功能;还集成了三方小程序或 H5 以及与他们的交互
              总用户数: 140W
              日活用户数: 1W左右
            </div>
            <div class="project-tech">
              技术栈：vue2/vuex/uniapp/luch-request/uviewui2/uni-simple-router
            </div>
            <div class="project-content">
              <div>
                主要工作内容:
              </div>
              <ul>
                <li>1. 独立负责支付宝小程序的搭建,开发维护和优化
                  1. 基于uni-simple-route,luch-request,uviewui2,友盟等插件以及利用scss预处理器书写常用样式等进行项目初步搭建
                  2. 使用vuex管理当前正在发起的网络请求(http模块), 每当发起一个请求时,就存进http模块的缓存中,请求完毕后,从缓存中剔除.
                  该模块的主要目的是在token过期等场景下,跳转登录页面时,需要取消当前正在发送的请求,以及防止TreeSelect等需要点击切换远程数据的组件中由于点击过快导致数据错乱的问题
                </li>
                <li>2. 负责调研支付宝小程序相关技术,做过语音识别功能,交互类似于微信发送语音 </li>
                <li>2. 采用uniapp的分包技术:subPackages配置, 和 不同包下分别引入静态文件 以及 将大图片放到公司服务器上来减少 小程序包体积大小,防止发布版本时出错</li>
                <li>3. 制定与第三方小程序或H5页面相互跳转传参的规范和封装相应逻辑函数,提升多公司合作的沟通效率以及开发维护效率:(主要有以下三条路径,其中箭头符号表示从哪个主体app进入下一个app)
                  <div>
                    健康宁波->H5->健康宁波
                  </div>
                  <div>
                    支付宝小程序->健康宁波
                  </div>
                  <div>
                    健康宁波->支付宝小程序
                  </div>

                  <div>
                    根据实际场景可以分为2大类: 健康宁波作为主入口,跳转其他app;以及从其他app中跳转到健康宁波;

                    <div>
                      1. 健康宁波作为主入口:
                      需要判断跳转前是否需要token校验,由于后台设置的token有效期是2h,而我们每次进入健康宁波的时间不定(token剩余有效时间不定,极有可能跳转时只剩几分钟甚至更少,导致进入三方小程序时,无法进行后续操作),所以函数设计的第一步就需要一个入参,是否需要token(boolean):
                      needToken,以该值为界限,判断跳转前是否调用接口请求; 接下来就是第三方app需要的入参了.
                      第三方需要的入参分为2个,一个是业务入参`businessParams`,一个是需要跳转的页面路径`url`;
                      然后如果第三方app是小程序则使用my.navigateToMiniProgram()api;
                      如果是H5,则跳转我们自己根据webview组件封装的页面,其内置有onMessage方法,与内嵌的H5页面进行通讯,这里通讯的需求也是一种跳转功能,固定传参type:
                      'other-mini'|'jknb',如果是other-mini代表是其他小程序,这个直接取出三方给的入参用即可,如果是jknb代表是跳转我们小程序内部的页面,businessParams和url,businessParams在我们部分功能页面通过mixin混入功能进行解析.
                    </div>

                    <div>
                      2.
                      如果主入口不是健康宁波,而是其他小程序或者H5页面,或者alipays或者支付宝的schema链接,则由我们提供参数,alipays
                    </div>
                  </div>

                </li>
                <li>4. 负责支付组件的开发

                  健康宁波支付场景主要有三个: 医保支付场景,预约挂号支付,号源候补支付

                  1. 抽象支付场景流程
                  支付流程通常主要是三个: 创建订单 -> 发起支付 -> 支付成功或失败
                </li>
              </ul>
            </div>
          </div>

          <div class="project-item">
            <div class="project-header">
              <div>
                2023.5-2024.9
              </div>
              <div class="text-center font-bold font-26">健康银行后台管理系统</div>
              <div hidden>
                2022.08-2023.8
              </div>
            </div>

            <div class="project-intro">
              项目简介：TODO

            </div>
            <div class="project-tech">
              技术栈：vue2/echarts/vuex/axios/vue-router/store/vue-seamless-scroll
            </div>
            <div class="project-content">
              <div>
                主要工作内容:
              </div>
              <ul>
                <li>1. 负责大屏开发及适配
                  1. 对动态监控列表使用vue-seamless-scroll插件实行无缝滚动;
                  2. 根据设计图尺寸以及大屏元素容器的尺寸动态计算缩放大小,使用transform:scale,进行适配
                  3. 使用echarts进行基础柱状饼状图等开发

                </li>
                <li>2. 负责动态路由的联调开发: 通过调用后台接口,根据返回的配置路由权限信息,以及vue-router提提供的api:addRoutes,动态添加路由 </li>
                <li>3. 负责商品等模块的开发 </li>
                <li>4. 封装基础业务组件或函数:
                  1. 封装resize函数,对指定原型进行宽度或高度的缩放与拉伸
                  2. daterange: 日期范围选择(因为element的不好用),使用两个日期组件,并动态设置disabled值
                  3. 图片拖拽排序组件: 基于vue-draggable
                  4. 
                </li>
                <li>2. 采用uniapp的分包技术:subPackages配置, 和 不同包下分别引入静态文件 以及 将大图片放到公司服务器上来减少 小程序包体积大小,防止发布版本时出错</li>
                <li>3. 制定与第三方小程序或H5页面相互跳转传参的规范和封装相应逻辑函数,提升多公司合作的沟通效率以及开发维护效率:(主要有以下三条路径,其中箭头符号表示从哪个主体app进入下一个app)
                  <div>
                    健康宁波->H5->健康宁波
                  </div>
                  <div>
                    支付宝小程序->健康宁波
                  </div>
                  <div>
                    健康宁波->支付宝小程序
                  </div>

                  <div>
                    根据实际场景可以分为2大类: 健康宁波作为主入口,跳转其他app;以及从其他app中跳转到健康宁波;

                    <div>
                      1. 健康宁波作为主入口:
                      需要判断跳转前是否需要token校验,由于后台设置的token有效期是2h,而我们每次进入健康宁波的时间不定(token剩余有效时间不定,极有可能跳转时只剩几分钟甚至更少,导致进入三方小程序时,无法进行后续操作),所以函数设计的第一步就需要一个入参,是否需要token(boolean):
                      needToken,以该值为界限,判断跳转前是否调用接口请求; 接下来就是第三方app需要的入参了.
                      第三方需要的入参分为2个,一个是业务入参`businessParams`,一个是需要跳转的页面路径`url`;
                      然后如果第三方app是小程序则使用my.navigateToMiniProgram()api;
                      如果是H5,则跳转我们自己根据webview组件封装的页面,其内置有onMessage方法,与内嵌的H5页面进行通讯,这里通讯的需求也是一种跳转功能,固定传参type:
                      'other-mini'|'jknb',如果是other-mini代表是其他小程序,这个直接取出三方给的入参用即可,如果是jknb代表是跳转我们小程序内部的页面,businessParams和url,businessParams在我们部分功能页面通过mixin混入功能进行解析.
                    </div>

                    <div>
                      2.
                      如果主入口不是健康宁波,而是其他小程序或者H5页面,或者alipays或者支付宝的schema链接,则由我们提供参数,alipays
                    </div>
                  </div>

                </li>
                <li>4. 负责支付组件的开发

                  健康宁波支付场景主要有三个: 医保支付场景,预约挂号支付,号源候补支付

                  1. 抽象支付场景流程
                  支付流程通常主要是三个: 创建订单 -> 发起支付 -> 支付成功或失败
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>


</template>

<style scoped lang="scss">
.title {
  font-size: 26px;
  color: #3F6212;
  margin-right: 10px;
}

.line {
  background-color: #9FB088;
  height: 4px;
  transform: scaleY(.5);
}

.info {

  padding: 20px 40px;
  background-color: #fff;
  min-height: 100vh;
  box-sizing: border-box;

  .header {

    height: 60px;
    font-size: 40px;
    color: #3F6212;

  }

  &-item {
    .title {}

    // margin-top: 20px;
  }
}

li {
  line-height: 28px;
}

// 个人资料
.grzl {
  padding: 0 20px;
  line-height: 44px;
  height: 44px;

  .flex-align {

    flex: 1;
    width: calc(100% / 3);

    &>div {
      &:nth-of-type(1) {
        font-weight: 600;
      }
    }

  }
}
</style>
